<template>
  <div class="system-role-dialog-container">
    <el-dialog :title="state.dialog.title" center class="borderRadius10" v-model="state.dialog.isShowDialog"
      width="490">
      <el-form ref="roleDialogFormRef" :rules="rules" :model="state.ruleForm" label-width="120px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="调整类型：" prop="agentPerformanceType">
              <el-select v-model="state.ruleForm.agentPerformanceType" placeholder="请选择调整类型" class="width260">
                <el-option v-for="item in state.agentPerformanceTypeList" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="调整业绩" prop="agentPerformanceValue">
              <el-input class="width260" @input="onVerifyNumberIntegerAndFloat($event)"
                v-model="state.ruleForm.agentPerformanceValue" placeholder="请输入调整业绩"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="调整原因" >
              <el-input class="width260" maxlength="100" show-word-limit v-model="state.ruleForm.agentPerformanceDesc"
                type="textarea" placeholder="请输入调整原因" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel">取 消</el-button>
          <el-button type="primary" @click="onSubmitForm(roleDialogFormRef)">
            {{ state.dialog.submitTxt }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { verifyNumberIntegerAndFloat } from '/@/utils/toolsValidate';
import { performanceChange } from "/@/api/agent";


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const addSpecRef = ref<FormInstance>();
// 定义变量内容
const roleDialogFormRef = ref();
const state = reactive({
  loading: false,
  agentPerformanceTypeList: [{
    label: "增加",
    value: 1
  }, {
    label: "减少",
    value: 0
  }] as Array<any>, //模板类型
  specList: [] as Array<any>, //规格列表
  ruleForm: {
    agentId: null,
    agentPerformanceType: null, //类型
    agentPerformanceValue: '', // 调整业绩
    agentPerformanceDesc: "" //调整说明
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
});

const rules = reactive<FormRules<any>>({
  agentPerformanceType: [{ required: true, message: '请选择调整类型', trigger: 'change' }],
  agentPerformanceValue: [{ required: true, message: '请输入调整业绩', trigger: 'blur' }],
})
// 小数或整数
const onVerifyNumberIntegerAndFloat = (val: string) => {
  state.ruleForm.agentPerformanceValue = verifyNumberIntegerAndFloat(val);
};

// 打开弹窗
const openDialog = (type: string, row?: any) => {
  state.dialog.type = type
  if (type === 'edit') {
    state.dialog.title = '调整业绩';
    state.dialog.submitTxt = '确 定';
    state.ruleForm.agentId = row.agentId;
  }
  state.dialog.isShowDialog = true;
};



// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};


// 添加规格项
const onSubmitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid: boolean) => {
    if (valid) {

      let params = {
        agentId: state.ruleForm.agentId,
        agentPerformanceType: state.ruleForm.agentPerformanceType,
        agentPerformanceValue: state.ruleForm.agentPerformanceValue,
        agentPerformanceDesc:state.ruleForm.agentPerformanceDesc
      }
      const { results } = await performanceChange(params);
      ElMessage.success('提交成功');
      state.loading = false;
      closeDialog();
      emit('refresh');
    }

  });
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss"></style>
